
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        #systemAddressBookManage{

        }
        #systemAddressBookManage .el-checkbox__input>.el-checkbox__inner {
            display:none;
        }
        #systemAddressBookManage .is-leaf + .el-checkbox .el-checkbox__inner {
            display:inline-block;
        }
        .el-dialog__body{
            overflow: auto;
        }
        @media (max-width: 1366px) {
            #systemAddressBookManage .table-wrap {
                height: 500px !important;;
                overflow: auto;
            }
        }
        .table-head{
            background-color: #EEF4FF;
            color: #333333;
            font-weight: normal;
            font-size: 14px;
            font-family: SourceHanSansCN;
            border: none;
            padding: 12px 15px;
            text-align:left !important;
        }
        .table-croll{
            display:table;
            padding:0px;
            width:100%;
        }
        .croll {
            display:table-row;
            list-style: none;
            height: 30px;
            width:100%;
            border-top: 0px;
            font-size: 13px;
            color: #333333;
            cursor:move;
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;
            line-height:25px;
            text-align:left ! important;
        }
        .croll li {
            display:table-cell ;
            float: left;
            width:25%;
            text-indent: 2em;
            list-style-type:none;
            height:25px;
            padding-left:5px;
            overflow:hidden;
            white-space:nowrap;
            vertical-align: middle;
            text-overflow:ellipsis
        }
        .croll:nth-of-type(even){ background:#f0f3f6;}
    </style>
</head>
<body>
<div id="systemAddressBookManage" class="center_div" style="display:none;">
    <div class="searchForm" style="margin-top: 1%;margin-left: 1%">
        <template >
            编组：
            <el-input v-model="name" size="mini" style="width: 10%"></el-input>
        </template>
        <el-button type="primary" size="mini" @click="query(1)">查询</el-button>
        <el-button type="primary" size="mini" @click="add">添加</el-button>
        <el-button type="primary" size="mini" @click="sort">调整排序</el-button>
    </div>
    <div class="table-wrap" style="margin-left: 1%">
        <el-table
                :data="tableData"
                style="width:100%;text-align: center"
                header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB"
                cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB">
            <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
            </el-table-column>
            <template v-if="buttons && buttons.length!==0">
                <el-table-column
                        class="align-right"
                        width="230px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button v-for="button in buttons"
                                   @click="operate(scope.row,button.href)" :type="button.type" class="el-button el-button--text el-button--medium">{{button.label}}
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
                layout="prev, pager, next"
                @current-change="changePageNum"
                :current-page="pageNum"
                :total="total">
        </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="showSort" width="40%" append-to-body  @close="updateIndex">
        <div style="height: 300px">
            <div class="table-head table-croll">
                <ul class="croll" style="cursor:Default">
                    <li>编组</li>
                    <li>所属集团</li>
                    <li>描述</li>
                    <li>操作</li>
                </ul>
            </div>
            <div id="group_items" class="table-croll">
                <ul  v-for="(item,index) in groupData" class="croll" :key="item.id">
                    <li>
                        {{item.name}}
                    </li>
                    <li>
                        {{item.fleetName}}
                    </li>
                    <li>
                        {{item.remark}}
                    </li>
                    <li>
                        <span><img src="images/newIcon/sortOperate.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle"></span>
                        <span><img src="images/newIcon/sortUp.png" style="height: 25px;width: 25px;margin-right: 10px;vertical-align: middle;cursor: pointer" @click="sortUp(index)"></span>
                    </li>
                </ul>
            </div>
        </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="showBox" width="30%" append-to-body>
        <el-form ref="form" :model="form" label-width="80px" size="mini">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="编组" :required="true">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="归属集团" :required="true">
                        <el-select v-model="form.fleetName" :placeholder="'请选择'" filterable>
                            <el-option :value="form.fleetName" style="height: auto">
                                <el-tree
                                        :load="loadChildren"
                                        highlight-current
                                        lazy
                                        node-key="id"
                                        :props="defaultProps"
                                        :filter-node-method="filterNode"
                                        ref="tree"
                                        @node-click="loadData">
                                        <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                                            <span v-if="data.type===0"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                            <span v-if="data.type===1"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                        </span>
                                </el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="描述">
                    <el-input v-model="form.remark" type="textarea"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item>
                    <el-button type="primary" @click="addSystemAddressBook" v-show="showAdd">添加</el-button>
                    <el-button type="primary" @click="updateSystemAddressBook" v-show="!showAdd">修改</el-button>
                    <el-button type="primary" @click="closeBox">取消</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </el-dialog>
    <el-dialog v-if="loadTree" :title="title" :visible.sync="showManageBox" @close="manageDialogClose" append-to-body>
        <div>
            <div style="float:left;width:60%;height:300px">
                <div style="height:99%;width:99%;margin-top:1%;background:white;overflow:auto">
                    <el-tree check-strictly
                             :load="loadFleetAndSub"
                             show-checkbox
                             highlight-current
                             lazy
                             node-key="id"
                             :props="defaultPropss"
                             :filter-node-method="filterNode"
                             ref="manageTree"
                             @check-change="handleCheckChange">
                            <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                                <span v-if="data.type===0"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                <span v-if="data.type===1"><img src="images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                                <span v-if="data.type===2"><img src="images/mapicon/tree_sub.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                            </span>
                    </el-tree>
                </div>
            </div>
            <div style="float:right;width:40%;height:300px;background: ghostwhite;overflow: auto">
                <div id="group_member_items" class="table-croll">
                    <ul  v-for="(item,index) in memberTableData" class="croll" :key="item.id">
                        <li>
                            {{item.subName}}
                        </li>
                        <li>
                            <span><img src="images/newIcon/sortUp.png" style="height: 23px;width: 23px;margin-right: 8px;vertical-align: middle;cursor: pointer" @click="sortUpUp(index)"></span>
                            <span><el-button @click="deleteMember(item.subId)" class="el-button el-button--text el-button--medium">删除</el-button></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div  style="margin-top: 20px;margin-left: 90%">
            <el-button type="primary" size="mini" @click="addSystemAddressBookMember" >确定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    VueComponent.createSystemAddressBookManage=function () {
        if(window.systemAddressBookManageVue){
            return;
        }
        window.systemAddressBookManageVue = new Vue({
            el: "#systemAddressBookManage",
            data: {
                name:'',
                loadTree:true,
                tableTitle: [
                    {label: '编组', prop: 'name'},
                    {label: '集团', prop: 'fleetName'},
                    {label: '描述', prop: 'remark'},
                ],
                tableData: [],
                memberTableTitle: [
                    {label: '成员', prop: 'subName'},
                    {label: '归属集团', prop: 'fleetName'},
                    {label: '编组', prop: 'groupName'},
                ],
                memberTableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                buttons: [{label: "编辑", href: "update"},{label: "删除", href: "delete"},{label: "成员管理", href: "manage"}],
                showBox:false,
                showManageBox:false,
                showAdd:true,
                title:'',
                form: {
                    id:'',
                    name:'',
                    fleetName:'',
                    fleetId:'',
                    remark:'',
                },
                defaultProps: {
                    label: 'name',
                    isLeaf:'isLeaf'
                },
                defaultPropss: {
                    label: 'name',
                    isLeaf:'isLeaf'
                },
                groupId:'',
                groupData:'',
                showSort:false,
            },
            mounted: function () {
                this.query();
            },
            methods: {
                updateIndex:function () {
                    console.log(this.groupData);
                    var that=this;
                    axios.post('/scs/systemAddressBookManage/updateSystemAddressBookIndex', {groupData:that.groupData})
                        .then(function (res) {
                            var res = res.data;
                            if (res.success) {
                                that.query(1);
                            } else {
                                that.$message(res.msg);
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                sortUp:function (index) {
                    let temp = this.groupData[index];
                    for(var i = index ; i>0 ; i--){
                        this.$set(this.groupData,i,this.groupData[i-1]);
                    }
                    this.$set(this.groupData,0,temp);
                },
                sortUpUp:function (index) {
                    let temp = this.memberTableData[index];
                    for(var i = index ; i>0 ; i--){
                        this.$set(this.memberTableData,i,this.memberTableData[i-1]);
                    }
                    this.$set(this.memberTableData,0,temp);
                },
                sort:function () {
                    var data = {
                        fleetId: window.fleetId,
                        pageNum:  1,
                        pageSize: 100000
                    };
                    axios.post('/scs/systemAddressBookManage/getSystemAddressBook', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.groupData = data.obj.list;
                                } else {
                                    this.$message('查询失败');
                                }
                            } else {
                                this.$message('查询失败');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                    this.title='调整排序',
                    this.showSort=true;
                    var that = this;
                    setTimeout(function () {
                        var el = document.getElementById('group_items');
                        this.sortable = Sortable.create(el,{onEnd: function (evt) {
                                let itemEl = evt.item;
                                let oldIndex = evt.oldIndex;
                                let newIndex = evt.newIndex;
                                let temp = that.groupData[oldIndex];
                                if( oldIndex < newIndex ){
                                    for(var i = oldIndex ; i < newIndex ; i++){
                                        that.groupData[i] = that.groupData[i+1];
                                    }
                                }else if( oldIndex > newIndex ){
                                    for(var i = oldIndex ; i > newIndex ; i--){
                                        that.groupData[i] = that.groupData[i-1];
                                    }
                                }
                                that.groupData[newIndex] = temp;
                            },
                        });
                    },100)
                    setTimeout(function () {
                        $('.croll li').css('width','25%');
                    },100)
                },
                manageDialogClose(){
                    window.systemAddressBookManageVue.loadTree=false;
                    setTimeout(function () {
                        window.systemAddressBookManageVue.loadTree=true;
                    },100);
                },
                loadChildren: function (node, resolve) {
                    var that =this;
                    if(node.data){
                        that.getChild(node.data.id , node.data.type ,resolve);
                    }else{
                        setTimeout(function(){ that.getChild( window.fleetId , 0 ,resolve);}, 0);
                    }
                },
                getChild: function (id, type,resolve) {
                    var jsonData={
                        parentId:id,
                        type:type
                    };
                    axios.post('/scs/fleetManage/getFleet',jsonData)
                        .then(function (res) {
                            res = res.data;
                            if(res.success){
                                var childNodes = [];
                                if (res.obj) {
                                    childNodes = res.obj;
                                }
                                resolve(childNodes);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                filterNode:function(value, data) {
                    if (!value)
                        return true;
                    else
                        return data.name.indexOf(value) !== -1;
                },
                loadData:function (node) {
                    this.form.fleetName=node.name;
                    this.form.fleetId=node.id;
                },
                loadFleetAndSub: function (node, resolve) {
                    var that =this;
                    if(node.data){
                        if(node.data.type===2){
                            var childNodes = [];
                            return resolve(childNodes);
                        }else {
                            that.getFleetAndSub(node.data.id , node.data.type ,resolve);
                        }
                    }else{
                        setTimeout(function(){ that.getFleetAndSub( window.fleetId , 0 ,resolve);}, 0);
                    }
                },
                getFleetAndSub: function (id, type,resolve) {
                    var jsonData={
                        parentId:id,
                        type:type,
                    };
                    axios.post('/scs/fleetManage/getFleetAndSub',jsonData)
                        .then(function (res) {
                            res = res.data;
                            if(res.success){
                                var childNodes = [];
                                if (res.obj && res.obj.length>0) {
                                    for(var i=0;i<res.obj.length;i++){
                                        if(res.obj[i].type===2){
                                            res.obj[i].isLeaf=true;
                                        }
                                    }
                                    childNodes = res.obj;
                                }else {
                                    var node = window.systemAddressBookManageVue.$refs.manageTree.getNode(id);
                                    node.loading = false;
                                    return
                                }
                                resolve(childNodes);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    setTimeout(function () {
                        for(var i=0;i<window.systemAddressBookManageVue.memberTableData.length;i++){
                            var node = window.systemAddressBookManageVue.$refs.manageTree.getNode(window.systemAddressBookManageVue.memberTableData[i].subId);
                            if(node!=null && node.checked === false){
                                node.checked = true;
                            }
                        }
                    },200);
                },
                deleteMember:function (id) {
                    for(var i=0;i<this.memberTableData.length;i++){
                        if(id === this.memberTableData[i].subId){
                            this.memberTableData.splice(i,1);
                            var node = window.systemAddressBookManageVue.$refs.manageTree.getNode(id);
                            node.checked = false;
                        }
                    }
                },
                handleCheckChange:function(data, checked, indeterminate) {
                    if( data.type === 2  && checked ){
                        var nodeObj={};
                        nodeObj.subId=data.id;
                        if(data.name.length>10){
                            nodeObj.subName=data.name.substring(0,10)+'...';
                        }else{
                            nodeObj.subName=data.name;
                        }
                        var length=false;
                        for(var i=0;i<this.memberTableData.length;i++){
                            if(data.id === this.memberTableData[i].subId){
                                length=true;
                            }
                        }
                        if(!length){
                            setTimeout(function () {
                                $('.croll').css('height','30px');
                                $('.croll').css('line-height','25px');
                                $('.croll li').css('width','50%');
                                $('.croll li').css('height','25px');
                            },10)
                            this.$set(this.memberTableData,this.memberTableData.length,nodeObj);
                        }
                    }else if(data.type === 2  && !checked ){
                        for(var i=0;i<this.memberTableData.length;i++){
                            if(data.id ===this.memberTableData[i].subId){
                                this.memberTableData.splice(i,1);
                            }
                        }
                    }
                },
                refreshNodeBy:function(){
                    var node = window.systemAddressBookManageVue.$refs.tree.getNode(window.fleetId);
                    node.loaded = false;
                    node.expand();
                },
                formClear:function () {
                    this.form.id='';
                    this.form.name='';
                    this.form.fleetId='';
                    this.form.fleetName='';
                    this.form.remark='';
                },
                query: function (pageNum) {
                    if(pageNum){
                        this.pageNum=pageNum;
                    }
                    var data = {
                        fleetId:window.fleetId,
                        name:this.name||'',
                        pageNum:this.pageNum,
                        pageSize:this.pageSize
                    };
                    axios.post('/scs/systemAddressBookManage/getSystemAddressBook', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.tableData=data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                getMemberTableData: function (id) {
                    this.memberTableData=[];
                    axios.post('/scs/systemAddressBookManage/getMemberTableData', {groupId:id})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.memberTableData=data.obj.list;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                add:function () {
                    var that=this;
                    that.formClear();
                    that.showBox = true;
                    that.showAdd = true;
                    that.title = "添加";
                    that.refreshNodeBy();
                },
                addSystemAddressBook:function(){
                    var that = this;
                    var data = {
                        name: this.form.name,
                        fleetId:this.form.fleetId,
                        remark:this.form.remark
                    };
                    if(that.form.name===''){
                        this.$message('编组不能为空');
                        return
                    }
                    if(that.form.fleetId===''){
                        this.$message('归属集团不能为空');
                        return
                    }
                    axios.post('/scs/systemAddressBookManage/addSystemAddressBook',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                if(res.obj.count===1){
                                    that.closeBox();
                                    that.$message('添加成功');
                                    that.query();
                                }else{
                                    that.$message('编组已存在');
                                }
                            }else{
                                that.$message('添加失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                updateSystemAddressBook:function () {
                    var that = this;
                    var data = {
                        id:that.form.id,
                        name: this.form.name,
                        fleetId:this.form.fleetId,
                        remark:this.form.remark
                    };
                    data.userId=DasConstant.userId;
                    axios.post('/scs/systemAddressBookManage/updateSystemAddressBook',data)
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                if(res.obj.count===1){
                                    that.closeBox();
                                    that.$message('编辑成功');
                                    that.query();
                                }else{
                                    that.$message('编组已存在');
                                }
                            }else{
                                that.$message('编辑失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                closeBox:function () {
                    this.formClear();
                    this.showBox=false;
                    this.showManageBox=false;
                },
                operate:function (row,href) {
                    var that=this;
                    that.formClear();
                    if(href.indexOf('update') !== -1){
                        that.showBox = true;
                        that.showAdd=false;
                        that.title = "编辑";
                        that.form.id=row.id;
                        that.form.name=row.name;
                        that.form.fleetName=row.fleetName;
                        that.form.fleetId=row.fleetId;
                        that.form.remark=row.remark;
                        that.refreshNodeBy();
                    }else if(href.indexOf('delete') !== -1){
                        this.$confirm('是否确定删除', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                        axios.post('/scs/systemAddressBookManage/deleteSystemAddressBook',{id:row.id})
                            .then(function (res) {
                                var res = res.data;
                                if(res.success){
                                    that.$message('删除成功');
                                    that.query();
                                }
                            })
                            .catch(function (err) {
                                console.log(err);
                            });})
                    }else{
                        that.groupId=row.id;
                        that.getMemberTableData(row.id);
                        that.showManageBox = true;
                        that.title = "成员管理";
                        var that = this;
                        setTimeout(function () {
                            var el = document.getElementById('group_member_items');
                            this.sortable = Sortable.create(el,{onEnd: function (evt) {
                                    let itemEl = evt.item;
                                    let oldIndex = evt.oldIndex;
                                    let newIndex = evt.newIndex;
                                    let temp = that.memberTableData[oldIndex];
                                    if( oldIndex < newIndex ){
                                        for(var i = oldIndex ; i < newIndex ; i++){
                                            that.memberTableData[i] = that.memberTableData[i+1];
                                        }
                                    }else if( oldIndex > newIndex ){
                                        for(var i = oldIndex ; i > newIndex ; i--){
                                            that.memberTableData[i] = that.memberTableData[i-1];
                                        }
                                    }
                                    that.memberTableData[newIndex] = temp;
                                },
                            });
                        },100)
                        setTimeout(function () {
                            $('.croll li').css('width','50%');
                        },100);
                    }
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
                addSystemAddressBookMember:function() {
                    var that=this;
                    axios.post('/scs/systemAddressBookManage/addSystemAddressBookMember',{groupId:that.groupId,memberTableData:that.memberTableData})
                        .then(function (res) {
                            var res = res.data;
                            if(res.success){
                                if(res.obj.count===1){
                                    that.$message('添加成功');
                                    that.showManageBox=false;
                                }else{
                                    that.$message('添加失败');
                                }
                            }else{
                                that.$message('添加失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
            }
        });
    }
</script>
</html>
